<template>
  <!-- 定义应用的根元素，其 id 为 app -->
  <div id="app">
    <!-- router-view 是 Vue Router 提供的一个组件，用于显示当前路由匹配到的组件 -->
    <!-- 当用户在应用中导航时，不同的路由对应的组件会在这里渲染 -->
    <router-view/>
  </div>
</template>

<script>
// 导出一个默认的 Vue 组件对象
export default {
  // 为组件指定一个名称，方便在调试和 Vue DevTools 中识别
  name: 'App',
  // created 是 Vue 组件的生命周期钩子函数，在实例已经创建完成之后被调用
  // 此时数据观测、property 和 method 的计算、watch/event 事件回调已经完成
  created() {
    // 在页面加载时读取 sessionStorage 里的状态信息
    // sessionStorage 是浏览器提供的一种会话存储对象，用于临时保存同一窗口（或标签页）的数据
    // 当页面关闭时数据会被清除
    if (sessionStorage.getItem("store")) {
      // 如果 sessionStorage 中存在名为 'store' 的数据
      // 使用 this.$store.replaceState 方法替换 Vuex store 中的状态
      // Object.assign 用于合并对象，将当前 store 的状态和 sessionStorage 中存储的状态合并
      // JSON.parse 用于将 sessionStorage 中存储的 JSON 字符串转换为 JavaScript 对象
      this.$store.replaceState(Object.assign({}, this.$store.state, JSON.parse(sessionStorage.getItem("store"))));
    }

    // 在页面刷新时将 Vuex 里的信息保存到 sessionStorage 里
    // window.addEventListener 用于监听浏览器窗口的事件
    // "beforeunload" 事件在窗口即将关闭或刷新时触发
    window.addEventListener("beforeunload", () => {
      // 将 Vuex store 中的状态转换为 JSON 字符串，并存储到 sessionStorage 中
      // 这样在页面刷新后可以恢复之前的状态
      sessionStorage.setItem("store", JSON.stringify(this.$store.state));
    });
  }
}
</script>

<style>
/* 设置 html、body 和 id 为 app 的元素的样式 */
html,
body,
#app {
  /* 去除外边距 */
  margin: 0;
  /* 去除内边距 */
  padding: 0;
  /* 设置高度为 100%，使其占满整个窗口 */
  height: 100%;
  /* 禁止用户选中文本 */
  user-select: none;
}

#app {
  /* 设置字体家族 */
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  /* 开启字体抗锯齿，使字体在 Mac 上显示更平滑 */
  -webkit-font-smoothing: antialiased;
  /* 开启字体抗锯齿，使字体在 Firefox 上显示更平滑 */
  -moz-osx-font-smoothing: grayscale;
}

/* 设置无序列表的样式 */
ul {
  /* 去除列表项前面的默认符号 */
  list-style-type: none;
  /* 去除外边距 */
  margin: 0;
  /* 去除内边距 */
  padding: 0;
}

/* 设置超链接的样式 */
a {
  /* 设置文本颜色为黑色 */
  color: #000000;
  /* 去除下划线 */
  text-decoration: none;
}

/* 设置输入框和按钮的样式 */
input,
button {
  /* 去除边框 */
  border: 0;
  /* 去除聚焦时的轮廓线 */
  outline: none;
}
</style>